<template>
  <div class="navbar">
    <div class="left">
      <div class="sideicon" @click="changeSide">
        <el-icon v-if="userStore.isSidebarCompact" size="20"><Expand /></el-icon>
        <el-icon v-else size="20"><Fold /></el-icon>
      </div>
    </div>
    <div class="content">
      <tab-menu/>
    </div>
    <div class="right">
      <user-info/>
    </div>
  </div>
</template>

<script setup>
import useStore from '@/store'
import userInfo from '@/components/common/header/UserInfo'
import tabMenu from '@/components/common/menu/TabMenu'

const { userStore } = useStore()
const changeSide = () => {
  userStore.updateConfig({ key: 'isSidebarCompact', value: !userStore.isSidebarCompact })
}

</script>

<style lang="less" scoped>
.navbar {
  height: 100%;
  display: flex;
  justify-content:space-between;
  border-bottom: solid 1px var(--el-color-info-light-8);
  background: var(--el-color-white);
  .left {
    height: 100%;
    .el-icon {
      padding: 20px 20px 20px 15px;
      cursor: pointer;
    }
    .sideicon :hover {
      background: #F9FAFB;
    }
  }
  .content {
    flex-grow: 1;
    width: calc(100% - 60px - 300px);
  }
  .right {
    width: 300px;
    height: 100%;
  }
}
</style>
